<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById的使用</title>
    <script>
        // 全选。
        function selectAll() {
            //1,获取这一组复选框。
            var sports = document.getElementsByName("sport");
            //sports 是什么？ 是nodeList集合。
            // alert(sports);
            // 2.拿到[dom,集合],操作[属性和方法api]
            // 遍历sports, 修改。
            for (var i = 0; i < sports.length; i++) {
                sports[i].checked = true;
            }

        }

        // 全不选。
        function selectNone() {
            //1,获取这一组复选框。
            var sports = document.getElementsByName("sport");

            // nodeList集合，拿到[dom,集合],操作[属性和方法api]。
            // 遍历sprots ,修改.
            for (let i = 0; i < sports.length; i++) {
                sports[i].checked = false;
            }
        }

        function selectReverse() {
            //反选。
            var sports = document.getElementsByName("sport");

            for (let i = 0; i < sports.length; i++) {
                sports[i].checked = !sports[i].checked;
            }
        }

        //动态注册/绑定事件。
        window.onload = function () {
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                //查找id=java 节点。
                var java = document.getElementById("java");
                alert("java节点文本= " + java.innerText);
            }

            //查找所有的option节点。
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function () {
                // (id--->getElementById,  name-->getElementByName,
                // 元素标签名 -->getElementsByTagName();
                var options = document.getElementsByTagName("option");
                alert(options);
                for (let i = 0; i < options.length; i++) {
                    alert("值 = " + options[i].innerText);
                }
            }

            //查找name=sport 的节点。
            var btn03 = document.getElementById("btn03");
            btn03.onclick = function () {
                var sports = document.getElementsByName("sport");
                for (let i = 0; i < sports.length; i++) {
                    if (sports[i].checked) {
                        alert("运动是= " + sports[i].value);
                    }
                }
            }

            // 查找id=language 下所有li节点。
            var btn04 = document.getElementById("btn04");
            btn04.onclick = function () {
                var lis = document.getElementsByTagName("li");
                for (let i = 0; i < lis.length; i++) {
                    alert(lis[i].innerText);
                }
            }
            // 返回id=sel01 的所有子节点[3]种方法。
            var btn05 = document.getElementById("btn05");
            btn05.onclick = function () {
                // var elementsByTagName = document.getElementById("sel01").getElementsByTagName("option");
                // for (let i = 0; i < elementsByTagName.length; i++) {
                //         alert(elementsByTagName[i]);
                // }

                //2,如果不希望得到text对象，需要将所有的内容放在一行。
                var childNodes = document.getElementById("sel01").childNodes;
                for (var i = 0; i < childNodes.length; i++) {
                    if (childNodes[i].selected) {
                        alert(i + " " + childNodes[i].innerText);
                    }
                }
                var childNodes = document.getElementById("sel01").childNodes;
                for (var i = 0; i < childNodes.length; i++) {
                    if (childNodes[i].selected) {
                        alert(i + " " + childNodes[i].innerText);
                    }
                }


            }


        }
    </script>

</head>
<body>
<div id="total">
    <div class="inner">
        你会的运动项目：
        <input type="checkbox" name="sport" value="zq" checked="checked">足球
        <input type="checkbox" name="sport" value="tq">台球
        <input type="checkbox" name="sport" value="ppq">乒乓球<br/><br/>
        <button onclick="selectAll()">全选</button>
        <button onclick="selectNone()">全不选</button>
        <button onclick="selectReverse()">反选</button>
        <hr>
        <p>
            你当前的女友是谁：
        </p>
        <select id="sle01">
            <option>--女友--</option>
            <option>范冰冰</option>
            <option id="ct" value="春桃菇凉">春桃</option>
            <option>春花</option>
            <option>桃红</option>
        </select>
        <hr>
        <p>
            你的编程语言？
        </p>
        <ul id="language">
            <li id="java">java 哈哈哈</li>
            <li>PHP</li>
            <li>C++</li>
            <li>Python</li>
        </ul>
        <br>
        <br>
        <hr>
        <p>
            个人介绍:
        </p>
        <textarea name="person" id="person">个人介绍</textarea>

    </div>
</div>

<div id="btnList">
    <div>
        <button id="btn01">查找id=java节点</button>
    </div>
    <div>
        <button id="btn02">查找所有option节点</button>
    </div>
    <div>
        <button id="btn03">查找 name=sport 的节点</button>
    </div>
    <div>
        <button id="btn04">查找 id=language 下所有 li 节点</button>
    </div>
    <div>
        <button id="btn05">返回 id=sel01 的所有子节点</button>
    </div>
    <div>
        <button id="btn06">返回 id=sel01 的第一个子节点</button>
    </div>
    <div>
        <button id="btn07">返回 id=java 的父节点</button>
    </div>
    <div>
        <button id="btn08">返回 id=ct 的前后兄弟节点</button>
    </div>
    <div>
        <button id="btn09">读取 id=ct 的 value 属性值</button>
    </div>
    <div>
        <button id="btn10">设置#person 的文本域</button>
    </div>

</div>
</body>

</html>


